<template>
  <view 
    class="fixed bottom-0 left-0 right-0 z-1000 box-border flex items-end justify-between overflow-visible bg-white px-20rpx py-10rpx shadow-[0_-2rpx_10rpx_rgba(0,0,0,0.05)]"
    :style="{ paddingBottom: safeAreaBottom }"
  >
    <view class="flex flex-1 items-center justify-between py-10rpx">
      <view class="flex flex-1 flex-col items-center justify-center" @tap="switchTab('/pages/tab/home/index')">
        <image :src="selectedPath === '/pages/tab/home/index' ? iconHomeSelected : iconHome" class="mb-5rpx h-50rpx w-50rpx" />
        <text class="text-26rpx" :style="{ color: selectedPath === '/pages/tab/home/index' ? selectedColor : color }">
          首页
        </text>
      </view>
      <view class="flex flex-1 flex-col items-center justify-center" @tap="switchTab('/pages/tab/pick/index')">
        <image :src="selectedPath === '/pages/tab/pick/index' ? iconPickSelected : iconPick" class="mb-5rpx h-50rpx w-50rpx" />
        <text class="text-26rpx" :style="{ color: selectedPath === '/pages/tab/pick/index' ? selectedColor : color }">
          取单
        </text>
      </view>
    </view>

    <view class="relative h-120rpx w-120rpx flex items-center justify-center -mt-60rpx" @tap="navigateTo('/pages/tab/order/index')">
      <view class="mb-40rpx h-120rpx w-120rpx flex flex-col items-center justify-center rounded-60rpx bg-[#21d59d]">
        <image :src="selectedPath === '/pages/tab/order/index' ? iconOrderSelected : iconOrder" class="mb-4rpx h-58rpx w-58rpx" />
        <text class="text-28rpx text-white">
          开单
        </text>
      </view>
    </view>

    <view class="flex flex-1 items-center justify-between py-10rpx">
      <view class="flex flex-1 flex-col items-center justify-center" @tap="switchTab('/pages/cart/index')">
        <image
          :src="selectedPath === '/pages/tab/cashier/index' ? iconCashierSelected : iconCashier"
          class="mb-5rpx h-50rpx w-50rpx"
        />
        <text class="text-26rpx" :style="{ color: selectedPath === '/pages/tab/cashier/index' ? selectedColor : color }">
          收银
        </text>
      </view>
      <view class="flex flex-1 flex-col items-center justify-center" @tap="switchTab('/pages/tab/user/index')">
        <image :src="selectedPath === '/pages/tab/user/index' ? iconUserSelected : iconUser" class="mb-5rpx h-50rpx w-50rpx" />
        <text class="text-26rpx" :style="{ color: selectedPath === '/pages/tab/user/index' ? selectedColor : color }">
          我的
        </text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, defineEmits, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const emit = defineEmits(['navigate']);

const selectedPath = ref<string>('');
const safeAreaInsetBottom = ref(0);

// 动态计算底部安全区域高度
const safeAreaBottom = computed(() => {
  // 最大限制为 10px，避免过大
  const maxSafeArea = 10;
  const actualSafeArea = Math.min(safeAreaInsetBottom.value, maxSafeArea);
  return `${actualSafeArea}px`;
});
const color = '#1b233b';
const selectedColor = '#21d59d';
const iconHome = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_home.png';
const iconHomeSelected = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_home_selected.png';
const iconPick = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_list.png';
const iconPickSelected = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_list_selected.png';
const iconOrder = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_order.png';
const iconOrderSelected = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_center_selected.png';
const iconCashier = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_cart.png';
const iconCashierSelected = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_cart_selected.png';
const iconUser = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_user.png';
const iconUserSelected = 'https://ceshiweb.picaime.com/static/images/tabbar/icon_user_selected.png';

function switchTab(url: string) {
  uni.navigateTo({
    url,
  });
}

function navigateTo(url: string) {
  emit('navigate', { type: 'navigateTo', url });
}

onLoad(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  safeAreaInsetBottom.value = systemInfo.safeAreaInsets?.bottom || 0;
});

onShow(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentRoute = `/${currentPage.route}`;
  selectedPath.value = currentRoute;
});
</script>
